<!DOCTYPE html>
<html lang="en">
<!-- <html xmlns="http://www.w3.org/1999/xhtml"> -->

</html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="百度地图,百度地图API,百度地图自定义工具，百度地图所见即所得工具" />
    <meta name="description" content="百度地图API自定义地图,帮助用户在可视化操作下生成百度地图" />
    <title>联系</title>
    <link rel="stylesheet" href="../css/contactPage.css">
    <link rel="stylesheet" href="../fonts/iconfont.css">
    <script src="../js/utils/register.js"></script>
    <!--引用百度地图API-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=mg28oXAV2nkzYgxZzYcYdI0omgDK9WuI"></script>
</head>

<body>
    <!-- 头部区域 -->
    <div class="header">
        <!-- logo区域 -->
        <div class="header_logo">
            <img src="../img/logo.webp" alt="">
        </div>
        <!-- 导航栏区域 -->
        <div class="header_nav clearfloat">
            <ul class="right">
                <li><a href="./01-首页.html">首页</a></li>
                <li><a href="./02-关于.html">关于</a></li>
                <li><a href="./03-茶叶.html">茶叶</a></li>
                <li><a href="./04-基地.html">基地</a></li>
                <li><a href="./05-新闻.html">新闻</a></li>
                <li><a href="./06-联系.html">联系</a></li>
            </ul>
        </div>
        <!-- 用户区域 -->
        <div class="header_icon">
            <span class="iconfont icon-sousuo"></span>
            <span class="iconfont icon-yonghu" onclick="location.href='07-register.html'"></span>
            <span class="iconfont icon-gouwuche" onclick="location.href='08-shopcar.html'"></span>
        </div>

    </div>
    <!-- banner图区域 -->
    <img src="../img/contact_banner.webp" alt="">
    <!-- 内容区域 -->
    <div class="article">
        <div class="article_content">
            <div class="article_title">
                <p>
                    中国历史上有很长的饮茶纪录，已经无法确切地查明到底是在什么年代了，但是大致的时代是有说法的。并且也可以找到证据显示，确实在世界上的很多地方饮茶的习惯是从中国传过去的。</p>
            </div>
            <!-- 图片 -->
            <div class="article_img">
                <div class="article_img_content">
                    <img src="../img/contact_img1.webp" alt="">
                    <p>邮箱</p>
                    <span>info@email.com</span>
                </div>
                <div class="article_img_content">
                    <img src="../img/contact_img2.webp" alt="">
                    <p>手机</p>
                    <span>13725415481/010 6888 6888</span>
                </div>
                <div class="article_img_content">
                    <img src="../img/contact_img3.webp" alt="">
                    <p>地址</p>
                    <span>苏州市建外SOHO东区2号楼</span>
                </div>
            </div>
            <!-- 留言板 -->
            <div class="article_message" id="map">

            </div>
            <!--百度地图容器-->
            <!-- <div style="width:700px;height:550px;border:#ccc solid 1px;font-size:12px" id="map"></div> -->

        </div>
    </div>
    <!-- foot 页脚 -->
    <div class="foot">
        <div class="foot_art">
            <div class="foot_content">
                <div class="foot_contact">
                    <p>联系</p>
                    <p>Contact</p>
                </div>
                <div class="foot_our">
                    <p>关注我们</p>
                    <span class="iconfont icon-weixinlogo "></span>
                    <span class="iconfont icon-weibo-logo"></span>
                </div>
                <div class="foot_article">
                    <p>起飞页自助建站平台</p>
                    <p>地址:苏州市建外SOHO东区2号楼</p>
                    <p>邮编:100000</p>
                    <p>电话:010-69557550</p>
                </div>
                <div class="foot_erweima">
                    <img src="../img/shouye-foot-erweima1.webp" alt="">
                    <p>微信</p>
                </div>
                <div class="foot_erweima">
                    <img src="../img/shouye-foot-erweima2.webp" alt="">
                    <p>微博</p>
                </div>

            </div>

        </div>
        <div class="foot_bottom">
            <p>COPYRIGHT (©) 2019 茶叶类网站 京ICP备41414141414-1号</p>
        </div>
    </div>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=mg28oXAV2nkzYgxZzYcYdI0omgDK9WuI"></script>
    <script type="text/javascript">
        //创建和初始化地图函数：
        function initMap() {
            createMap(); //创建地图
            setMapEvent(); //设置地图事件
            addMapControl(); //向地图添加控件
            addMapOverlay(); //向地图添加覆盖物
        }

        function createMap() {
            map = new BMap.Map("map");
            map.centerAndZoom(new BMap.Point(113.708659, 34.753595), 15);
        }

        function setMapEvent() {
            map.enableScrollWheelZoom();
            map.enableKeyboard();
            map.enableDragging();
            map.enableDoubleClickZoom()
        }

        function addClickHandler(target, window) {
            target.addEventListener("click", function() {
                target.openInfoWindow(window);
            });
        }

        function addMapOverlay() {
            var markers = [{
                content: "我的备注",
                title: "公司",
                imageOffset: {
                    width: 0,
                    height: 3
                },
                position: {
                    lat: 34.755197,
                    lng: 113.707078
                }
            }];
            for (var index = 0; index < markers.length; index++) {
                var point = new BMap.Point(markers[index].position.lng, markers[index].position.lat);
                var marker = new BMap.Marker(point, {
                    icon: new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png", new BMap.Size(20, 25), {
                        imageOffset: new BMap.Size(markers[index].imageOffset.width, markers[index].imageOffset.height)
                    })
                });
                var label = new BMap.Label(markers[index].title, {
                    offset: new BMap.Size(25, 5)
                });
                var opts = {
                    width: 200,
                    title: markers[index].title,
                    enableMessage: false
                };
                var infoWindow = new BMap.InfoWindow(markers[index].content, opts);
                marker.setLabel(label);
                addClickHandler(marker, infoWindow);
                map.addOverlay(marker);
            };
        }
        //向地图添加控件
        function addMapControl() {
            var scaleControl = new BMap.ScaleControl({
                anchor: BMAP_ANCHOR_BOTTOM_LEFT
            });
            scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
            map.addControl(scaleControl);
            var navControl = new BMap.NavigationControl({
                anchor: BMAP_ANCHOR_TOP_LEFT,
                type: BMAP_NAVIGATION_CONTROL_LARGE
            });
            map.addControl(navControl);
            var overviewControl = new BMap.OverviewMapControl({
                anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
                isOpen: true
            });
            map.addControl(overviewControl);
        }
        var map;
        initMap();
    </script>
</body>

</html>